import React,{useState,useEffect,FC} from 'react'
import {Modal,Form,Input} from 'antd'
import {singleType,formValues} from '../data.d';
import {useModel} from 'umi'
interface UserModalType{
  modalVisible:boolean,
  handleCancel:()=>void,
  userInfo:singleType | undefined,
  onFinish:(values:formValues)=>void,
  isSuccess:boolean,
  confirmLoading:boolean
}
const  UserModal:FC<UserModalType>  = (props)=> {
  const [userForm] = Form.useForm();
  const {modalVisible,handleCancel,userInfo,onFinish,isSuccess,confirmLoading} = props
  const {userName,age} = useModel("userInfo")
  const onFinishFailed = (errorInfo: any) => {
  };
  const submitHanler = ()=>{
    userForm.submit();
  }
  useEffect(()=>{
    if(userInfo){//判断userInfo对象中是否包含id属性
      userForm.setFieldsValue(userInfo)
    }else{
      if(isSuccess){
        userForm.resetFields()
      }else{
        return undefined
      }
    }
  },[userInfo,isSuccess])
  
  return (
    <div>
      <Modal visible={modalVisible} title={`${userName}先生，您好！`} onOk={submitHanler} onCancel={handleCancel} forceRender confirmLoading={confirmLoading}>
        
      <Form
      form={userForm}
      name="userInfo"
      initialValues={{}}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="姓名"
        name="userName"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="年龄"
        name="age"
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="地址"
        name="address"
      >
        <Input />
      </Form.Item>
      </Form>
      </Modal>
    </div>
  )
}

export default UserModal as any
